<template>
	<div class="main-page">
		<div class="page-header">
			<div class="page-header-title">
				辽宁省房地产市场监测系统 —— 模拟预测
			</div>
			<div class="page-header-filtrate">
				<public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
				<!-- <month-range-time-filtrate-public :monthRange="monthRange" class="page-header-filtrate-month-range"
					@changeFiltrateTime="changeMonthRange" /> -->
			</div>
			<div class="bcak-home-btn"><router-link :to="{ name: 'propertyWatch' }">返回首页</router-link></div>
		</div>
		<div class="page-content">
			<div class="left-box">
				<div class="chunk-title">
					<div class="box-title">
						<div class="box-title-left">房地产走势预测</div>
						<!-- <div class="box-title-right">预测范围未来六个月</div> -->
					</div>
					<div class="bot-box"></div>
				</div>
				<div class="top-box">
					<div class="page-item">
						<div class="page-item-title">房地产开发投资走势预测</div>
						<div class="page-item-cont">
							<barLinePublicYc v-if="houseDevelInvestForecastParams.xAxisData.length > 0"
								:housingSupplyStatsData="houseDevelInvestForecastParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublicYc>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-title">新建商品房销售面积走势预测</div>
						<div class="page-item-cont">
							<barLinePublicYc v-if="comHouseSellAreatForecastParams.xAxisData.length > 0"
								:housingSupplyStatsData="comHouseSellAreatForecastParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublicYc>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-title">新建商品房销售额走势预测</div>
						<div class="page-item-cont">
							<barLinePublicYc v-if="comHouseSellEForecastParams.xAxisData.length > 0"
								:housingSupplyStatsData="comHouseSellEForecastParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublicYc>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-title">新建商品房销售均价走势预测</div>
						<div class="page-item-cont">
							<barLinePublicYc v-if="comHouseSellMoneyForecastParams.xAxisData.length > 0"
								:housingSupplyStatsData="comHouseSellMoneyForecastParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublicYc>
						</div>
					</div>
				</div>
				<div class="mt25 bot-chunk-flex" style="width: 100vw;position: absolute">
					<div class="chunk-title chunk-title-bot">
						<div class="box-title">
							<div class="box-title-left">商品住宅需求预测</div>
						</div>
						<div class="bot-box"></div>
					</div>
					<div class="chunk-title chunk-title-bot1">
						<div class="box-title">

							<div class="box-title-left flex ac" style="width: 100%;">
								<div>新建商品房需求预测</div>
								<div class="goTouter" @click="goRouer1()">进入</div>
							</div>
						</div>
						<div class="bot-box"></div>
					</div>
					<div class="chunk-title chunk-title-bot2">
						<div class="box-title">
							<div class="box-title-left flex ac" style="width: 100%;">
								<div>购房意愿分析</div>
								<div class="goTouter" @click="goRouer2()">进入</div>
								 <month-range-time-filtrate-public :monthRange="monthRange"
									class="page-header-filtrate-month-range" @changeFiltrateTime="changeMonthRange" />
							</div>
						</div>
						<div class="bot-box"></div>
					</div>
				</div>
				<div class="bottom-box">
					<div class="page-item">
						<div class="page-item-title flex jsb ">
							<div>房屋供应结构预测</div>
							<div class="bot-tab-box flex">
								<div class="bot-tab-box-item" :class="{ 'active': tabIndexBot == 1 }"
									@click="selectTabIndexBox(1)">面积</div>
								<div class="bot-tab-box-item" :class="{ 'active': tabIndexBot == 2 }"
									@click="selectTabIndexBox(2)">户型</div>
							</div>
						</div>
						<div class="page-item-cont">
							<!-- <demo  style="height: 100%;"></demo> -->
							<barLinePbulicPile v-if="selectStructureForecastParams.xAxisData.length > 0"
								:housingSupplyStatsData="selectStructureForecastParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePbulicPile>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-title">购房人购房套数预测</div>
						<div class="page-item-cont">
							<barLinePbulicPile v-if="selectStructureForecastCountParams.xAxisData.length > 0"
								:housingSupplyStatsData="selectStructureForecastCountParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePbulicPile>

						</div>
					</div>
					<div class="page-item">
						<div class="page-item-title">购房人来源地预测</div>
						<div class="page-item-cont">
							<barLinePbulicPile v-if="selectStructureForecasFromParams.xAxisData.length > 0"
								:housingSupplyStatsData="selectStructureForecasFromParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePbulicPile>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-cont last">
							<double-line-with-mark-area
							v-if="newCommodityHouseSaleCycleAnalysisData.xAxisData?.length"
							ref="newCommodityHouseSaleCycleAnalysisRef"
							:line-data="newCommodityHouseSaleCycleAnalysisData"
							style="height: 100%;"
								@dialogData="dialogData"
							></double-line-with-mark-area>
						</div>
					</div>
					<div class="page-item">
						<div class="page-item-cont last">
							<barLinePublic v-if="housepureWillAnalyseParams.xAxisData.length > 0"
								:housingSupplyStatsData="housepureWillAnalyseParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublic>
						</div>
					</div>
				</div>
			</div>
			<div class="right-box">
				<div class="chunk-title">
					<div class="box-title">
						<div class="box-title-left">房地产走势预测</div>
						<!-- <div class="box-title-right">预测范围未来六个月</div> -->
					</div>
					<div class="bot-box"></div>
				</div>
				<div class="control-box">
					<div class="control-box-item">
						<div class="control-box-item-left">GDP</div>
						<div class="control-box-item-right">
							<counter :legend="counterLegend[0]" @setInputValue="setInputValue"></counter>
						</div>
					</div>
					<div class="control-box-item">
						<div class="control-box-item-left">人均GDP</div>
						<div class="control-box-item-right">
							<counter :legend="counterLegend[1]" @setInputValue="setInputValue"></counter>
						</div>
					</div>
					<div class="control-box-item">
						<div class="control-box-item-left">常住人口</div>
						<div class="control-box-item-right">
							<counter :legend="counterLegend[2]" @setInputValue="setInputValue"></counter>
						</div>
					</div>
				</div>
				<div class="right-bot-box">
					<div class="right-page-item">
						<div class="right-page-item-title">宏观经济指标对房地产开发投资模拟</div>
						<div class="right-page-item-cont">
							<barLinePublicFx v-if="selectProjectBuildingForecastDevelInsParams.xAxisData.length > 0"
								:housingSupplyStatsData="selectProjectBuildingForecastDevelInsParams"
								style="height: 100%;" @dialogData="dialogData"></barLinePublicFx>
						</div>
					</div>
					<div class="right-page-item">
						<div class="right-page-item-title flex jsb">
							<div class="tab-title">{{ tabName }}</div>
							<div class="tab-titles flex">
								<div class="tab-item-title flex jsb ac" :class="{ 'active': tabIndex == index }"
									v-for="(item, index) in tabs" @click="sekectTab(index)">{{ item.name }}</div>
							</div>
						</div>
						<div class="right-page-item-cont">
							<barLinePublicFx v-if="selectProjectBuildingForecastAreaParams.xAxisData.length > 0"
								:housingSupplyStatsData="selectProjectBuildingForecastAreaParams" style="height: 100%;"
								@dialogData="dialogData"></barLinePublicFx>
						</div>
					</div>
				</div>
			</div>
		</div>
		<magnify v-if="magnifyEchartData" :housingSupplyStatsData="magnifyEchartData" @closeDialog="closeDialog">
		</magnify>
	</div>
</template>


<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import publicChangeProvinceCity from "@/components/landSupply/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/landSupply/timeFiltratePublic.vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import barLinePublicYc from "@/components/landSupply/barLinePbulicYc.vue";
import barLinePublicFx from "@/components/landSupply/barLinePbulicFx.vue";
import barLinePbulicPile from "@/components/landSupply/barLinePbulicPile.vue";
import barLinePublicZhzq from "@/components/landSupply/barLinePublicZhzq.vue";
import barLinePublic from "@/components/landSupply/barLinePbulic.vue";
import barStacked from "@/components/landSupply/barStacked.vue"
import magnify from "@/components/public/magnify.vue";
import counter from "@/components/landSupply/counter.vue";
import demo from "@/components/landSupply/demo.vue";
import doubleLineWithMarkArea from "@/components/landSupply/doubleLineWithMarkArea.vue";


import {
	selectProjectBuildingForecast,
	defaultParameterSEachLevel,
	selectProjectBuildingForecastGdp,
	selectStructureForecast,
	selectNumberForecast,
	selectSourceForecast,
} from "@/api/landSupply";
import {
  getPurchaseAspirationStatisticsLine,
} from "@/api/simulatedPredictionTwo";
import { relative } from "path";
import { TypeItem } from "@/type/chartsPbulic";
const route = useRoute()
const router = useRouter()
const cityObj = ref({
	name: '',
	code: null
}) // 地图-城市code信息
const mapList = ref([
	{ name: '辽宁省', code: '210000' },
	{ name: '沈阳市', code: '210100' },
	{ name: '大连市', code: '210200' },
	{ name: '鞍山市', code: '210300' },
	{ name: '抚顺市', code: '210400' },
	{ name: '本溪市', code: '210500' },
	{ name: '丹东市', code: '210600' },
	{ name: '锦州市', code: '210700' },
	{ name: '营口市', code: '210800' },
	{ name: '阜新市', code: '210900' },
	{ name: '辽阳市', code: '211000' },
	{ name: '盘锦市', code: '211100' },
	{ name: '铁岭市', code: '211200' },
	{ name: '朝阳市', code: '211300' },
	{ name: '葫芦岛市', code: '211400' }
])
const monthRange = ref<any>([])
const startTime = ref<any>(null)
const endTime = ref<any>(null)
const magnifyEchartData = ref(null)//弹框
const counterLegend = reactive<any>([
	{ bg: 'counterBg1.png', topBg: 'counterBgTop1.png', bottom: 'counterBgBot1.png', unit: '亿', value: 0, fontColor: 'rgba(3, 219, 255, 1)', setp: 10 },
	{ bg: 'counterBg2.png', topBg: 'counterBgTop2.png', bottom: 'counterBgBot2.png', unit: '元', value: 0, fontColor: 'rgba(255, 175, 3, 1)', setp: 1000 },
	{ bg: 'counterBg3.png', topBg: 'counterBgTop3.png', bottom: 'counterBgBot3.png', unit: '万', value: 0, fontColor: 'rgba(58, 255, 3, 1)', setp: 10 },
])
const tabs = ref([
	{ name: '销售面积', key: '1' },
	{ name: '销售额', key: '2' },
	{ name: '销售均价', key: '3' },
])
const tabIndex = ref(0)
const tabName = ref('宏观经济指标对商品住宅销售面积模拟')
const tabIndexBot = ref(1)
const years = ref(null)
const barType = ref(1)
const qhzq = ref(null)
const houseDevelInvestForecastParams = ref({//房地产开发投资走势预测
	xAxisData: <any>[],
})
const comHouseSellAreatForecastParams = ref({//新建商品住宅销售面积走势预测
	xAxisData: <any>[],
})
const comHouseSellEForecastParams = ref({//新建商品住宅销售额走势预测
	xAxisData: <any>[],
})
const comHouseSellMoneyForecastParams = ref({//新建商品住宅销售均价走势预测
	xAxisData: <any>[],
})
const selectProjectBuildingForecastDevelInsParams = ref({//宏观经济指标对房地产开发投资模拟
	xAxisData: <any>[],
})
const selectProjectBuildingForecastAreaParams = ref({//宏观经济指标对商品住宅销售面积模拟
	xAxisData: <any>[],
})
const selectProjectBuildingForecastSaleParams = ref({//宏观经济指标对商品住宅销售额模拟
	xAxisData: <any>[],
})
const selectProjectBuildingForecastMoneyParams = ref({//宏观经济指标对商品住宅销售均价模拟
	xAxisData: <any>[],
})
const selectStructureForecastParams = ref({//商品住宅需求预测 房屋供应结构预测 
	xAxisData: <any>[],
})
const selectStructureForecastCountParams = ref({//商品住宅需求预测 购房人购房套数预测
	xAxisData: <any>[],
})
const selectStructureForecasFromParams = ref({//商品住宅需求预测 购房人来源地预测
	xAxisData: <any>[],
})
const comresBuildForecasParams = ref({//新建商品住宅需求预测
	xAxisData: <any>[],
})
const housepureWillAnalyseParams = ref({//购房意愿分析
	xAxisData: <any>[],
})
const newCommodityHouseSaleCycleAnalysisData =ref({
legendData:["商品房销售面积","商品房库存面积"],
xAxisData:[],
lineData:[],
dialogTitle:'新建商品房需求预测',
forecastIndex:0,
cityCode: cityObj.value.code,
dataZoomStartValue:0,
})

//各个级别默认参数 GDP 人均GDP 人口
const defaultParameterSEachLevelPost = async () => {
	let { data } = await defaultParameterSEachLevel({ xzqhdm: cityObj.value.code })
	counterLegend[0].value = data.gdp
	counterLegend[1].value = data.rjgdp
	counterLegend[2].value = data.rk
	years.value = data.years
	selectProjectBuildingForecastDevelIns()
	selectProjectBuildingForecastArea()
	selectProjectBuildingForecastSale()
	selectProjectBuildingForecastMoney()

}
//房地产开发投资走势预测
const houseDevelInvestForecast = async () => {
	let { data } = await selectProjectBuildingForecast({ xzqhdm: cityObj.value.code, forecastType: 1 })
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['实际走势', '时间序列预测'],
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	houseDevelInvestForecastParams.value = paramsData;
}
//新建商品住宅销售面积走势预测
const comHouseSellAreatForecast = async () => {
	let { data } = await selectProjectBuildingForecast({ xzqhdm: cityObj.value.code, forecastType: 2 })
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['实际走势', '时间序列预测'],
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	comHouseSellAreatForecastParams.value = paramsData;
}
//新建商品住宅销售额走势预测
const comHouseSellEForecast = async () => {
	let { data } = await selectProjectBuildingForecast({ xzqhdm: cityObj.value.code, forecastType: 3 })
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['实际走势', '时间序列预测'],
		data.x,
		[
			{
				name: "单位：万元",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	comHouseSellEForecastParams.value = paramsData;
}
//新建商品住宅销售均价走势预测
const comHouseSellMoneyForecast = async () => {
	let { data } = await selectProjectBuildingForecast({ xzqhdm: cityObj.value.code, forecastType: 4 })
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		['实际走势', '时间序列预测'],
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[
			data.y,
			data.y1
		],
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},

		],
		legendStyle,
		gridConfig
	);
	comHouseSellMoneyForecastParams.value = paramsData;
}
//宏观经济指标对房地产开发投资模拟
const selectProjectBuildingForecastDevelIns = async () => {
	let { data } = await selectProjectBuildingForecastGdp({ xzqhdm: cityObj.value.code, forecastType: 1, gdp: counterLegend[0].value, rjgdp: counterLegend[1].value, rk: counterLegend[2].value, years: years.value })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		legendArr,
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		dataArr,
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},
			{
				a: "#EC808D",
				b: "#EC808D",
			}
		],
		legendStyle,
		gridConfig
	);
	selectProjectBuildingForecastDevelInsParams.value = paramsData;
}
//宏观经济指标对商品住宅销售面积模拟
const selectProjectBuildingForecastArea = async () => {
	let { data } = await selectProjectBuildingForecastGdp({ xzqhdm: cityObj.value.code, forecastType: 2, gdp: counterLegend[0].value, rjgdp: counterLegend[1].value, rk: counterLegend[2].value, years: years.value })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		legendArr,
		data.x,
		[
			{
				name: "单位：万m²",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		dataArr,
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},
			{
				a: "#EC808D",
				b: "#EC808D",
			}

		],
		legendStyle,
		gridConfig
	);
	selectProjectBuildingForecastAreaParams.value = paramsData;
}
//宏观经济指标对商品住宅销售额模拟
const selectProjectBuildingForecastSale = async () => {
	let { data } = await selectProjectBuildingForecastGdp({ xzqhdm: cityObj.value.code, forecastType: 3, gdp: counterLegend[0].value, rjgdp: counterLegend[1].value, rk: counterLegend[2].value, years: years.value })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		legendArr,
		data.x,
		[
			{
				name: "单位：亿元",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		dataArr,
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},
			{
				a: "#EC808D",
				b: "#EC808D",
			}

		],
		legendStyle,
		gridConfig
	);
	selectProjectBuildingForecastAreaParams.value = paramsData;
}
//宏观经济指标对商品住宅销售均价模拟
const selectProjectBuildingForecastMoney = async () => {
	let { data } = await selectProjectBuildingForecastGdp({ xzqhdm: cityObj.value.code, forecastType: 4, gdp: counterLegend[0].value, rjgdp: counterLegend[1].value, rk: counterLegend[2].value, years: years.value })

	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 50
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 50,
	};
	let paramsData = barLineParamsData(
		legendArr,
		data.x,
		[
			{
				name: "单位：元/m²",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},

		],
		dataArr,
		[
			{
				a: "#02A7F0",
				b: "#02A7F0",
			}, {
				a: "#80EC98",
				b: "#80EC98",
			},
			{
				a: "#EC808D",
				b: "#EC808D",
			}

		],
		legendStyle,
		gridConfig
	);
	selectProjectBuildingForecastAreaParams.value = paramsData;
}
//获取gdp 人均gdp 人口
const setInputValue = (val: { unit: string; inputValue: number; }) => {
	barType.value = 2
	switch (val.unit) {
		case '亿':
			counterLegend[0].value = val.inputValue
			break;
		case '元':
			counterLegend[1].value = val.inputValue
			break;
		case '万':
			counterLegend[2].value = val.inputValue
			break;
		default:
	}
	selectProjectBuildingForecastDevelIns()
	selectProjectBuildingForecastArea()
	selectProjectBuildingForecastSale()
	selectProjectBuildingForecastMoney()

}
//商品住宅需求预测 房屋供应结构预测 
const selectStructureForecastGet = async () => {
	let { data } = await selectStructureForecast({ xzqhdm: cityObj.value.code, structureType: tabIndexBot.value, })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	const typeData: TypeItem[] = []
	data.y.forEach((item: { name: any; }) => {
		typeData.push({
			name: "bar",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
	})
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 60,
	};
	let paramsData = barLineParamsData(
		data.nameList,
		data.x,
		[
			{
				name: "",
				type: "1",
			},
		],
		typeData,
		data.y,
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	selectStructureForecastParams.value = paramsData;
}
//商品住宅需求预测 购房人购房套数预测
const selectStructureForecastCountGet = async () => {
	let { data } = await selectStructureForecast({ xzqhdm: cityObj.value.code, structureType: 3, })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	const typeData: TypeItem[] = []
	data.y.forEach((item: { name: any; }) => {
		typeData.push({
			name: "bar",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
	})
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 60,
	};
	let paramsData = barLineParamsData(
		data.nameList,
		data.x,
		[
			{
				name: "",
				type: "1",
			},
		],
		typeData,
		data.y,
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	selectStructureForecastCountParams.value = paramsData;
}
//商品住宅需求预测 购房人来源地预测
const selectStructureForecasFromGet = async () => {
	let { data } = await selectStructureForecast({ xzqhdm: cityObj.value.code, structureType: 4, })
	let legendArr;
	let dataArr = [];
	if (barType.value == 2) {
		legendArr = ['实际走势', '时间序列预测', '预期变动']
		dataArr = [data.y, data.y1, data.y2]
	} else {
		legendArr = ['实际走势', '时间序列预测']
		dataArr = [data.y, data.y1]
	}
	const typeData: TypeItem[] = []
	data.y.forEach((item: { name: any; }) => {
		typeData.push({
			name: "bar",
			type: '1',
			areaStyleType: "1",
			stack: "1",
		})
	})
	let legendStyle = {
		show: true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 60,
	};
	let paramsData = barLineParamsData(
		data.nameList,
		data.x,
		[
			{
				name: "",
				type: "1",
			},
		],
		typeData,
		data.y,
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	selectStructureForecasFromParams.value = paramsData;
}
//新建商品房需求预测
const comresBuildForecasGet = async () => {
	let { data } = await selectNumberForecast({ xzqhdm: cityObj.value.code, forecastType: 1 })
newCommodityHouseSaleCycleAnalysisData.value.xAxisData = data.x
newCommodityHouseSaleCycleAnalysisData.value.lineData = [data.y,data.y1]
newCommodityHouseSaleCycleAnalysisData.value.forecastIndex = data.qhzq
newCommodityHouseSaleCycleAnalysisData.value.dataZoomStartValue = data.x?.findIndex((x: string) => x === '2024-05')
}
//购房意愿分析
const housepureWillAnalyseGet = async () => {
	let { data } = await getPurchaseAspirationStatisticsLine({
    startDate: startTime.value,
    endDate: endTime.value
  })
	let legendStyle = {
		show:true,
		icon: "circle",
		top: 12,
		itemWidth: 10,
		itemHeight: 10,
		itemGap: 5,
	};
	let gridConfig = {
		left: 10,
		right: 16,
		bottom: 15,
		top: 70,
	};
	let paramsData = barLineParamsData(
		['卖旧买新', '外地居民首套购房'],
		data.XAxis,
		[
			{
				name: "单位：万㎡",
				type: "1",
			},
		],
		[
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
			{
				name: "line",
				type: '1',
				areaStyleType: "1",
				stack: "1",
			},
		],
		[data.yAxis1, data.yAxis2],
		[
			{
				a: "rgba(84, 112, 198, 1)",
				b: "rgba(84, 112, 198, 1)",
			},
			{
				a: "rgba(145, 204, 117, 1)",
				b: "rgba(145, 204, 117, 1)",
			},
			{
				a: "rgba(255, 195, 82, 1)",
				b: "rgba(255, 195, 82, 1)",
			},
			{
				a: "#2AC6D7",
				b: "#2AC6D7",
			},
			{
				a: "#F00D30",
				b: "#F00D30",
			},
			{
				a: "#CD83FF",
				b: "#CD83FF",
			},
		],
		legendStyle,
		gridConfig
	);
	housepureWillAnalyseParams.value = paramsData;
}
//切换右上角tab
const sekectTab = (index: number) => {
	tabIndex.value = index
	switch (index) {
		case 0:
			selectProjectBuildingForecastArea()
			tabName.value = '宏观经济指标对商品住宅销售面积模拟'
			break;
		case 1:
			selectProjectBuildingForecastSale()
			tabName.value = '宏观经济指标对商品住宅销售额模拟'
			break;
		case 2:
			selectProjectBuildingForecastMoney()
			tabName.value = '宏观经济指标对商品住宅销售均价模拟'
			break;
	}
}
//左下角切换tab
const selectTabIndexBox = (index: number) => {
	tabIndexBot.value = index
	selectStructureForecastGet()
}
//城市
const changeCity = (city: any) => {
	cityObj.value.code = city
	allFun()
}
//时间
const changeMonthRange = (time: any) => {
	startTime.value = time[0]
	endTime.value = time[1]
	housepureWillAnalyseGet()
}
// 打开弹框
const dialogData = (val: null) => {
	magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val: any) => {
	magnifyEchartData.value = null
}
//跳转下一页
const goRouer1 = () => {
	router.push({ path: 'newCommodityHouseDemandForecast' });
}
const goRouer2 = () => {
	router.push({ path: 'simulatedPredictionTwo' });
}
const allFun = () => {
	defaultParameterSEachLevelPost()
	houseDevelInvestForecast()
	comHouseSellAreatForecast()
	comHouseSellEForecast()
	comHouseSellMoneyForecast()
	selectStructureForecasFromGet()
	comresBuildForecasGet()
	housepureWillAnalyseGet()
	housepureWillAnalyseGet()
	selectStructureForecastGet()
	selectStructureForecastCountGet()
}

onMounted(() => {
	cityObj.value.code = route.query.xzqhdm
	startTime.value = route.query.startTime
	endTime.value = route.query.endTime
	monthRange.value = [startTime.value, endTime.value]
	allFun()
})
</script>

<style scoped lang="less">
.main-page {
	width: 100vw;
	height: 100vh;
	background-image: url("@/assets/img/landSupply/pageBg.png");
	background-size: 100% 100%;
	color: #fff;
	overflow: hidden;

	.page-header {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		height: 100px;
		background-image: url("@/assets/img/landSupply/headBg.png");
		background-size: 100% 100%;
		margin-bottom: 6px;

		&-title {
			position: absolute;
			left: 50px;
			font-size: 35px;
			color: #A6EDFF;
			text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
		}

		&-filtrate {
			position: relative;
			display: flex;
			align-items: center;
			top: 15px;
			left: 150px;

			.filtrate-city {
				width: 120px;

				/deep/ .el-select__wrapper {
					font-size: 15px;
				}

				margin-right: 30px;
			}

			.page-header-filtrate-month-range {

				/deep/ .el-range-input,
				/deep/ .el-range-separator {
					font-size: 15px;
					font-weight: lighter;
				}
			}
		}

		.bcak-home-btn {
			position: absolute;
			top: 52px;
			right: 50px;
			font-size: 20px;
			color: #7bebed;
			cursor: pointer;

			a {
				color: #7bebed;
			}
		}
	}

	.page-content {
		width: 100vw;
		height: calc(100vh - 106px);
		display: grid;
		grid-gap: 0.10417rem 25px;
		grid-template: repeat(6, 0.72917rem) / repeat(3, 608px);
		place-content: start center;

		.left-box {

			grid-row: 1/7;
			grid-column: 1/3;

			.top-box {
				height: 520px;
				display: grid;
				grid-template: repeat(2, 250px) / repeat(2, 608px);
				grid-gap: 20px 25px;

				.page-item-cont {
					background-image: url("@/assets/img/landSupply/itemBg.png");
					background-size: 100% 100%;
					height: 220px;
				}
			}

			.bottom-box {
				margin-top: 80px;
				display: grid;
				grid-template-columns: 335px 335px 335px 395px 395px;
				grid-template-rows: 280px;
				grid-gap: 0px 20px;

				.page-item-cont {
					background-image: url("@/assets/img/landSupply/itemBg.png");
					background-size: 100% 100%;
					height: 260px;
				}

				.page-item-cont.last {
					height: 290px;
				}
			}

		}

		.right-box {
			grid-row: 1/7;
			grid-column: 3/4;

			.control-box {
				display: flex;
				justify-content: space-between;
				margin-bottom: 16px;

				.control-box-item {
					display: flex;
					align-items: center;

					.control-box-item-left {
						font-weight: bold;
						font-size: 18px;
						color: #FFFFFF;
					}

					.control-box-item-right {
						margin-left: 15px;
					}
				}
			}

			.right-bot-box {
				background-image: url("@/assets/img/landSupply/rightBotBox.png");
				background-size: 100% 100%;
				// height: calc(100% - 116px);
				padding: 15px 20px;

				.right-page-item {
					box-sizing: border-box;

					.right-page-item-title {
						height: 24px;
						font-weight: bold;
						font-size: 18px;
						color: #FFFFFF;
					}

					.right-page-item-cont {
						height: 191px;
					}
				}

				.right-page-item:last-child {
					margin-top: 10px;
				}
			}
		}
	}

	.chunk-title {
		margin-bottom: 20px;

		.box-title {
			display: flex;
			align-items: center;

			.box-title-left {
				font-weight: bold;
				font-size: 24px;
				color: #FFFFFF;
				line-height: 43px;
				text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
			}

		}

		.bot-box {
			height: 1px;
			background: linear-gradient(90deg, rgba(37, 143, 255, 0) 0%, #318CFF 3%, rgba(96, 249, 244, 0.61) 87%, rgba(17, 146, 255, 0) 100%);
			box-shadow: 0px 0px 0px 1px rgba(108, 224, 255, 0.17);
		}
	}

	.bot-chunk-flex {
		display: flex;
		margin-top: 20px;

		.chunk-title-bot {
			width: 1040px;
		}

		.chunk-title-bot1 {
			margin-left: 24px;
			width: 395px;
		}

		.chunk-title-bot2 {
			margin-left: 24px;
			width: 395px;
		}
	}

	.page-item {
		.page-item-title {
			background-image: url("@/assets/img/landSupply/contTitle.png");
			background-size: 100% 100%;
			height: 30px;
			font-weight: bold;
			font-size: 18px;
			color: #FFFFFF;
			padding-left: 40px;

			.bot-tab-box {
				.bot-tab-box-item {
					background: rgba(33, 135, 244, 0.2);
					font-weight: 600;
					font-size: 14px;
					color: #FFFFFF;
					padding: 3px 5px;
				}

				.bot-tab-box-item.active {
					background: #2187F4;
					border: 1px solid #218BD0;
				}
			}

			.bot-tab-box-item:hover {
				cursor: pointer;
			}
		}
	}
}

.tab-titles {
	.tab-item-title {
		background: rgba(33, 135, 244, 0.2);
		font-weight: 600;
		font-size: 14px;
		color: #FFFFFF;
		padding: 3px 5px;
	}

	.tab-item-title:hover {
		cursor: pointer;
	}

	.tab-item-title:not(:first-child) {
		margin-left: 10px
	}

	.tab-item-title.active {
		background: #2187F4;
		border: 1px solid #218BD0;
	}
}

.goTouter {
	margin-left: 20px;
	height: 30px;
	display: flex;
	align-items: center;
	font-weight: 600;
	font-size: 14px;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2187F4;
	border: 1px solid #218BD0;
	padding: 0px 8px;
	border-radius: 3px;
}

.goTouter:hover {
	cursor: pointer;
}

.mt25 {
	margin-top: 10px;
}

:deep(.el-tabs) {
	display: flex;
	align-items: center;

	.el-tabs__header {
		margin: 0;
	}

	.el-tabs__nav-wrap:after {
		height: 0;
	}

	.el-tabs__active-bar {
		height: 0;
	}

	.el-tabs__item {
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0;
		font-size: 12px;
		height: 20px;
		cursor: pointer;
		color: white;
		background: rgb(9, 31, 63);
	}

	.el-tabs__item.is-active {
		background: #2187F4;
	}
}

:deep(.el-date-editor) {
	opacity: 1;
	width: 150px !important;
	margin-left: 30px
}

/deep/ .el-dialog {
	background-color: rgb(6, 37, 69);

	.el-dialog__title {
		font-size: 30px;
		color: white;
	}

	.el-dialog__close {
		color: white;
		font-size: 25px;
	}
}
</style>
